<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8"/>
    <title>控制台 - 容易迈汽车管理系统首页</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <#include "../../head/common-css.ftl" />
    <#include "../../head/common-js.ftl" />
    <link rel="stylesheet" href="${request.contextPath}/css/chosen.css"/>
    <script type="text/javascript" src="${request.contextPath}/js/chosen.jquery.js"></script>

    <!-- js操作 -->
    <script type="text/javascript">
        // 属性菜单属性配置
        var setting = {
            view: {
                addHoverDom: addHoverDom,
                removeHoverDom: removeHoverDom,
                selectedMulti: false,
                dblClickExpand: false
            },
            check: {
                enable: false
            },
            data: {
                simpleData: {
                    enable: true,
                    pIdKey: "pid"
                },
                key: {
                    name: "menuName"
                }
            },
            edit: {
                enable: true,
                showRemoveBtn: true,
                showRenameBtn: false
            },
            callback: {
                onCollapse: collapseNode,
                onExpand: expandNode,
                beforeRemove: zTreeBeforeRemove,
                onClick: menuClick
            }
        };

        // 菜单移除之前事件
        function zTreeBeforeRemove(treeId, treeNode) {
            if (treeNode.id != 0) {
                var flag = false;
                layer.confirm('是否确认要删除菜单？', {
                    btn: ['确认', '取消'] //按钮
                }, function (index) {
                    if (treeNode.children && treeNode.children.length > 0) {
                        layer.msg('当前存在子节点,请首先删除子节点.');
                        return;
                    }
                    $.ajax({
                        url: "doDel.do",
                        type: "post",
                        data: {
                            menuId: treeNode.id
                        },
                        dataType: "json",
                        success: function (result) {
                            if (result.success) {
                                $.fn.zTree.getZTreeObj("treeDemo").removeNode(treeNode);
                                $('#menu_info').hide();
                            } else {
                                layer.msg(result.msg);
                            }
                        }
                    });
                    layer.close(index);
                });
                return flag;
            } else {
                layer.msg('不能删除根节点.', {icon: 5});
                return false;
            }
        }

        // 菜单收缩事件
        function collapseNode(event, treeId, treeNode) {
            reinitTreeHight(window.parent.getIframeByElement(document.body));
        }

        // 菜单展开事件
        function expandNode(event, treeId, treeNode) {
            reinitTreeHight(window.parent.getIframeByElement(document.body));
        }

        // 菜单点击事件
        function menuClick(event, treeId, treeNode) {
            if (treeNode.id != '0') {
                // 判断是否为新增菜单
                if (treeNode.id.indexOf('new_') > -1) {
                    $("#pid").val(treeNode.pid);
                    // 展示菜单详细信息
                    $('#menu_info').show();
                    // 配置菜单信息
                    $("#menuName").text("请填写菜单名称...");
                    $("#menuId").val('');
                    $("#menuUrl").text('请修改菜单连接');
                    $("#ceateTime").text('暂无数据');
                    $("#isButton").text("请修改...");
                    $("#needPermission").parent().parent().hide();
                    $("#permissionName").parent().parent().hide();
                    reinitTreeHight(window.parent.getIframeByElement(document.body), "#menu_info");
                } else {
                    // 请求菜单信息信息
                    $.ajax({
                        url: "doDetail.do",
                        type: "post",
                        data: {
                            // 菜单ID
                            menuId: treeNode.id
                        },
                        dataType: "json",
                        success: function (msg) {
                            // 判断操作是否成功
                            if (msg.success) {
                                // 展示菜单详细信息
                                $('#menu_info').show();
                                // 配置菜单信息
                                $("#menuName").text(msg.result.menuName);
                                $("#menuId").val(treeNode.id);

                                // 判断创建时间是否为空
                                if (msg.result.createTime) {
                                    $("#ceateTime").text(formatTime(msg.result.createTime.time));
                                } else {
                                    $("#ceateTime").text('暂无数据');
                                }
                                $("#permissionName").parent().parent().hide();
                                $("#needPermission").parent().parent().hide();
                                // 判断是否为菜单类型
                                if (msg.result.isButton == '1') {
                                    $("#isButton").text("否");
                                    // 判断菜单URL是否为空
                                    if (treeNode.children && treeNode.children.length > 0) {
                                        $("#menuUrl").text('菜单类型,没有地址');
                                    } else {
                                        if (msg.result.menuUrl != '') {
                                            $("#menuUrl").text(msg.result.menuUrl);
                                        } else {
                                            $("#menuUrl").text('请修改菜单连接');
                                        }
                                    }
                                    $("#menuUrl").parent().parent().show();
                                } else {
                                    $("#isButton").text("是");
                                    $("#menuUrl").parent().parent().hide();
                                }

                                $("#needPermission").parent().parent().show();
                                // 判断是否需要权限
                                if (msg.result.menuPermissions && msg.result.menuPermissions.length > 0) {
                                    $("#needPermission").text('是');
                                    var permission = '';
                                    $.each(msg.result.menuPermissions, function (i, item) {
                                        if (i != (msg.result.menuPermissions.length - 1)) {
                                            permission += item.permissionName + ","
                                        } else {
                                            permission += item.permissionName
                                        }
                                    });
                                    $("#permissionName").text(permission);
                                    $("#permissionName").parent().parent().show();
                                } else {
                                    $("#needPermission").text('否');
                                    $("#permissionName").parent().parent().hide();
                                }
                                reinitTreeHight(window.parent.getIframeByElement(document.body), "#menu_info");
                            }
                        }
                    });
                }
            }
        }

        var newCount = 1;

        function addHoverDom(treeId, treeNode) {
            var sObj = $("#" + treeNode.tId + "_span");
            if (treeNode.editNameFlag || $("#addBtn_" + treeNode.tId).length > 0) return;
            var addStr = "<span class='button add' id='addBtn_" + treeNode.tId
                    + "' title='add node' onfocus='this.blur();'></span>";
            sObj.after(addStr);
            var btn = $("#addBtn_" + treeNode.tId);
            if (btn) {
                btn.bind("click", function () {
                    var zTree = $.fn.zTree.getZTreeObj("treeDemo");
                    zTree.addNodes(treeNode, {
                        id: ('new_' + newCount),
                        pId: treeNode.id,
                        menuName: "new node" + (newCount++)
                    });
                    reinitTreeHight(window.parent.getIframeByElement(document.body));
                    return false;
                });
            }
        }

        function removeHoverDom(treeId, treeNode) {
            $("#addBtn_" + treeNode.tId).unbind().remove();
        }

        // 加载树形结构
        $(function () {
            // 请求菜单数据
            $.ajax({
                url: "doList.do",
                type: "post",
                dataType: "json",
                success: function (msg) {
                    //要执行的代码
                    if (!msg.success) {
                        layer.msg(msg.msg);
                        return;
                    }
                    msg.results.push({
                        id: '0',
                        menuName: '根菜单目录'
                    });
                    //登录成功跳转页面
                    var treeObj = $.fn.zTree.init($("#treeDemo"), setting, msg.results);
                    var node = treeObj.getNodeByParam("id", 0, null);
                    treeObj.setChkDisabled(node, true);
                }
            });

            $('#btn').click(function () {
                var url = '${request.contextPath}/sys/menu/menuOperate.htm';
                if ($("#menuId").val() && $("#menuId").val() != '') {
                    url += '?menuId=' + $("#menuId").val();
                    if ($("#pid").val() && $("#pid").val() != '') {
                        url += '&pid=' + $("#pid").val();
                    }
                } else if ($("#pid").val() && $("#pid").val() != '') {
                    url += '?pid=' + $("#pid").val();
                }
                $("#menuModal").modal({
                    backdrop: 'static',  	// 点击空白不关闭
                    keyboard: false,		// 按键盘esc也不会关闭
                    remote: url	// 从远程加载内容的地址
                });
            });

            // dialog展示事件
            $('#menuModal').on('shown.bs.modal', function () {//捕获show事件
                reinitTreeHight(window.parent.getIframeByElement(document.body), '.page-content');
            });

            $("#menuModal").on("hidden.bs.modal", function () {
                $(this).removeData("bs.modal");
                reinitTreeHight(window.parent.getIframeByElement(document.body));
            });
        });
    </script>
</head>
<body>
<div class="page-content">
    <div class="row">
        <div class="col-xs-12">
            <!-- PAGE CONTENT BEGINS -->
            <div class="row">
                <div class="col-sm-6">
                    <h3 class="header smaller lighter green">
                        <i class="icon-bookmark"></i>
                        菜单信息
                    </h3>

                    <div class="tab-content">
                        <ul id="treeDemo" class="ztree">
                    </div>
                </div>

                <div class="col-sm-6" id="menu_info" class="menu_info" style="display: none;">
                    <div class="row">
                        <div class="col-sm-12">
                            <h3 class="header smaller lighter green">
                                <i class="icon-bookmark"></i>
                                菜单详细信息
                            </h3>
                            <input type="hidden" name="menuId" id="menuId">
                            <input type="hidden" name="pid" id="pid">
                            <div class="profile-user-info profile-user-info-striped">
                                <div class="profile-info-row">
                                    <div class="profile-info-name">菜单名称</div>
                                    <div class="profile-info-value">
                                        <span name="menuName" id="menuName"></span>
                                    </div>
                                </div>
                                <div class="profile-info-row">
                                    <div class="profile-info-name">是否为按钮</div>
                                    <div class="profile-info-value">
                                        <span name="isButton" id="isButton"></span>
                                    </div>
                                </div>
                                <div class="profile-info-row">
                                    <div class="profile-info-name">菜单地址</div>
                                    <div class="profile-info-value">
                                        <span name="menuUrl" id="menuUrl"></span>
                                    </div>
                                </div>
                                <div class="profile-info-row">
                                    <div class="profile-info-name">是否需要权限?</div>
                                    <div class="profile-info-value">
                                        <span name="needPermission" id="needPermission"></span>
                                    </div>
                                </div>
                                <div class="profile-info-row">
                                    <div class="profile-info-name">权限信息</div>
                                    <div class="profile-info-value">
                                        <span name="permissionName" id="permissionName"></span>
                                    </div>
                                </div>
                                <div class="profile-info-row">
                                    <div class="profile-info-name">创建时间</div>
                                    <div class="profile-info-value">
                                        <span id="ceateTime"></span>
                                    </div>
                                </div>
                                <div class="profile-info-row" id="submit_button">
                                    <div class="profile-info-name">操作</div>
                                    <div class="profile-info-value">
                                        <button class="btn btn-minier btn-success" id="btn">
                                            修改
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div><!-- /.col -->
    </div><!-- /.row -->
</div>


<!-- 弹出模态窗口-->
<div class="modal fade" tabindex="-1" role="dialog" id="menuModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <!-- 内容会加载到这里 -->
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</body>